<template>
  <div class="user">
    <!-- 头部 -->
    <div class="user-top">
      <div class="top">
        <div class="user-header-top" @click="avatarClick">
          <img v-if="info.photo" class="img" :src="info.photo" />
          <img v-else class="img" src="@/assets/logo.png" />
          <div class="uesr-name">
            <div v-if="info.name" class="c1">{{ info.name }}</div>
            <div v-else class="c1">编辑用户名</div>
            <div class="c2">申请认证</div>
          </div>
        </div>
        <div class="user-read">
          <img class="img1" src="@/assets/logo.png" alt="" />
          <div class="read">
            <div class="c3">今日阅读</div>
            <div class="c4">5分钟</div>
          </div>
        </div>
      </div>
      <div class="down">
        <!-- 收藏、历史、作品部分 -->
        <div class="user-collect">
          <div class="c1">
            <span>{{ info.art_count }}</span
            ><br />
            <span>动态</span>
          </div>
          <div class="c2" @click="userFocu">
            <span>{{ info.follow_count }}</span
            ><br />
            <span>关注</span>
          </div>
          <div class="c3" @click="userFans">
            <span>{{ info.fans_count }}</span
            ><br />
            <span>粉丝</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 底下信息选项栏 -->
    <div class="user-cell">
      <div class="c1" @click="collect">
        <i class="iconfont f1">&#xe649;</i><br />
        <span>收藏</span>
      </div>
      <div class="c1">
        <i class="iconfont f2">&#xe60e;</i><br />
        <span>历史</span>
      </div>
      <div class="c1" @click="userWork">
        <i class="iconfont f3">&#xe642;</i><br />
        <span>作品</span>
      </div>
    </div>
    <!-- 信息实名模块 -->
    <div class="user-message">
      <userCell
        title="消息通知"
        icon="&#xe653;"
        @click.native="message"
      ></userCell>
      <userCell
        title="实名认证"
        icon="&#xe653;"
        @click.native="real"
      ></userCell>
      <userCell
        title="用户反馈"
        icon="&#xe653;"
        @click.native="feedback"
      ></userCell>
      <userCell
        title="小智同学"
        icon="&#xe653;"
        @click.native="student"
      ></userCell>
      <userCell
        title="系统设置"
        icon="&#xe653;"
        @click.native="system"
      ></userCell>
    </div>
  </div>
</template>

<script>
// 导入
import userCell from './userCell'
// import { mapState } from 'vuex'
import { appUser } from '@/api/user.js'
export default {
  name: 'user',
  data () {
    return {
      info: ''
    }
  },
  components: {
    userCell
  },
  // computed: {
  //   ...mapState(['userInfo'])
  // },
  methods: {
    avatarClick () {
      this.$router.push('/home/userInfo')
    },
    system () {
      this.$router.push('/home/userSystem')
    },
    message () {
      this.$router.push('/home/userMessage')
    },
    real () {
      this.$router.push('/home/userReal')
    },
    feedback () {
      this.$router.push('/home/userFeedback')
    },
    student () {
      this.$router.push('/home/userStudent')
    },
    collect () {
      this.$router.push('/home/userHistory')
    },
    userWork () {
      this.$router.push('/home/userWork')
    },
    userFans () {
      this.$router.push('/home/userFans')
    },
    userFocu () {
      this.$router.push('/home/userFocu')
    }
  },
  async created () {
    const res = await appUser()
    console.log(res)
    this.info = res.data
    console.log('this.info', this.info)
  }
}
</script>

<style lang="less" scoped>
.user {
  // background-image: url(~@/assets/moto.jpg);
  .user-top {
    padding: 0 0 0 20px;
    height: 200px;
    background-color: #409dfa;
    .top {
      display: flex;
      align-items: center;
      .user-header-top {
        align-items: center;
        margin-top: 40px;
        flex: 1;
        .img {
          width: 66px;
          height: 66px;
          line-height: 33px;
          border-radius: 50%;
          background-color: #ffffff;
        }
        .uesr-name {
          text-align: center;
          padding-left: 75px;
          .c1 {
            text-align: left;
            margin-top: -60px;
            font-family: MicrosoftYaHei;
            font-size: 16px;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 1px;
            color: #ffffff;
            padding-bottom: 11px;
          }
          .c2 {
            width: 60px;
            background-color: #ffffff;
            border-radius: 8px;
            line-height: 16px;
            font-size: 12px;
            font-weight: 600;
            text-align: center;
            color: #409dfa;
          }
        }
      }
      .user-read {
        margin-top: 60px;
        align-items: center;
        width: 94px;
        height: 40px;

        background-color: #000;
        border-radius: 20px 0 0 20px;
        opacity: 0.5;
        .read {
          float: left;
          width: 50px;
          .c3 {
            padding-top: 8px;
          }
          .c3,
          .c4 {
            font-family: MicrosoftYaHei;
            font-size: 12px;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0px;
            color: #ffffff;
          }
        }
        .img1 {
          float: left;
          width: 18px;
          height: 18px;
          padding-top: 13px;
          margin-right: 5px;
          padding-left: 10px;
        }
      }
    }
  }
  .down {
    padding: 0 35px;
    .user-collect {
      display: flex;
      justify-content: space-between;
      padding-top: 28px;
      .c1,
      .c2,
      .c3 {
        text-align: center;
        span {
          font-family: ArialMT;
          font-size: 18px;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0px;
          color: #ffffff;
        }
      }
    }
  }
  .user-cell {
    padding: 13px 35px;
    display: flex;
    justify-content: space-between;
    border-bottom: 5px solid #f7f4f5;
    text-align: center;
    .c1 {
      span {
        font-family: MicrosoftYaHei;
        font-size: 14px;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0px;
        color: #333333;
      }
      .iconfont {
        font-size: 28px;
      }
      .f1 {
        color: #ec5f60;
      }
      .f2 {
        color: #ffa633;
      }
      .f3 {
        color: #6a90ff;
      }
    }
  }
}
</style>
